<template>
	<view class="map-wrap" v-if="markers[0].iconPath&&markers[1].iconPath">
		<map class="map" style="width: 100%;height: 400rpx;" :markers="markers" :include-points="includePoints" :longitude="longitude" :latitude="latitude"
			:polyline="polyline"></map>
	</view>
</template>

<script>
	/* 
	 
		type 1 用户端  2 司机端
		
	 */
	var amapFile = require('@/common/amap-wx.130.js')
	import {
		aMapWXkey
	} from '@/config/index.js'
	export default {
		data() {
			return {
				includePoints: [],
				polyline: [],
				qdzd: [],
				longitude: '',
				latitude: '',
				markers: [{
					id: 1,
					latitude: '',
					longitude: '',
					width: 24,
					height: 24,
					iconPath: '',
				}, {
					id: 2,
					latitude: '',
					longitude: '',
					width: 24,
					height: 24,
					iconPath: ''
				}],
				mapHeight: '',
				myAmapFun: null,
				origin: '', // 起点
				destination: '', //终点
				waypoints: '', // 途经点 经纬度
				timer: null,
				getIncludePointsFlag: true
			};
		},
		props: ['driver_id', 'type'],
		
		// watch:{
		// 	driver_id:function(){
		// 		this.getDriverLocation()
		// 	},
		// },
		mounted() {
			this.myAmapFun = new amapFile.AMapWX({
				key: aMapWXkey
			});
			this.getUserLocation()
			this.timer = setInterval(() => {
				// this.getDriverLocation()
				this.getUserLocation()
			}, 10000)
			console.log(this.timer)
		},
		beforeDestroy() {
			console.log(this.timer)
			clearInterval(this.timer)
			this.timer = null
			console.log('清除定时器')
		},
		methods: {
			// 获取司机位置
			getDriverLocation() {

				this.$api.dwGaiteloukeishen({
					yonghuid: this.driver_id
				}).then(res => {
					if (res.code == 1 && res.data != null) {
						this.markers[1].longitude = res.data.longitude
						this.markers[1].latitude = res.data.latitude

						let distants = ''
						this.$api.locationdistance({
							qd: `${res.data.longitude},${res.data.latitude}`,
							zd: `${this.longitude},${this.latitude}`
						}).then(res1 => {
							if (res1.code == 1) {
								if (this.type == 1) {
									this.markers[0].iconPath = '/static/icon_start.png'
									this.markers[1].iconPath = '/static/radarpc.png'
									this.markers[1].label = {
										content: `距您${res1.data}km`,
										bgColor: '#fff',
										padding: 6,
										borderRadius: 4,
										x: -20,
										y: 6,
										anchorX: -20,
										anchorY: 6,
									}
								} else {
									this.markers[0].iconPath = '/static/radarpc.png'
									this.markers[1].iconPath = '/static/icon_start.png'
									this.markers[1].label = {
										content: `距您${res1.data}km`,
										bgColor: '#fff',
										padding: 6,
										borderRadius: 4,
										x: -20,
										y: 6,
										anchorX: -20,
										anchorY: 6,
									}
								}
								this.destination = [res.data.longitude, res.data.latitude].toString()

								this.getLine()
								if (this.getIncludePointsFlag) {
									this.getIncludePointsFlag = false
									this.getIncludePoints()
								}
							} else {
								this.$tools.toast(res.msg)
							}
						})



					}
				})
			},
			// 获取用户自身位置
			getUserLocation() {
				uni.getLocation({
					type:'gcj02',
					success: (res) => {
						this.markers[0].longitude = res.longitude
						this.markers[0].latitude = res.latitude
						this.longitude = res.longitude
						this.latitude = res.latitude

						this.origin = [res.longitude, res.latitude].toString()
						this.getDriverLocation()
					}
				})
			},
			getLine() {
				this.myAmapFun.getDrivingRoute({
					origin: this.origin,
					destination: this.destination,
					success: (data) => {
						console.log(data)
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						this.polyline = [{
							points: points,
							color: "#519D76",
							width: 3,
							arrowLine: true,
						}]
					},
					fail: function(info) {
						console.log(info)
					}
				})
			},
			// 添加途经点
			getIncludePoints() {
				let points = []
				this.markers.forEach((item, i) => {
					points.push({
						latitude: item.latitude,
						longitude: item.longitude,
					})
				})
				this.includePoints = points
				console.log('this.includePoints', this.includePoints)
			}
		}
	}
</script>

<style>
	.map-wrap {
		position: relative;
		width: 100%;
		height: 400upx;
	}

	.map {
		width: 750upx;
		height: 400upx;
		border-radius: 16upx;
		overflow: hidden;
	}

	.header {
		padding: 30upx;
		border-bottom: 1upx solid #f5f5f5;
	}

	.cancel {
		font-size: 30upx;
		font-weight: 400;
		color: #333333;
	}

	.confirm {
		width: 120upx;
		line-height: 58upx;
		background: #519D76;
		border-radius: 8upx;
		text-align: center;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.address {
		padding: 30upx;
	}

	.title {
		font-size: 26upx;
		color: #999;
	}

	.desc {
		font-size: 30upx;
		color: #333;
		font-weight: 500;
	}
</style>
